<?php

$color = array('Blue','Green','Red','Yellow');
$line = array();
$x = 1;
$y = 1;
$interval = 50;
$even_line = 6;
$odd_line = 5;
$css = '';
$balls = 28;


for ($i = 0; $i < $balls; $i++) {


    $left = (($y % 2) == 0) ? ($x * $interval) + ($interval / 2) : $x * $interval;
    $top = $y * $interval;
    $col = ($color[rand(0, 3)]);
    $css = 'background-color:'.$col.';width:'.$interval.'px; height: '.$interval.'px;';
    $attrib = 'style="left:' . $left . 'px; top:' . $top . 'px;'.$css.'" title="' . $left . '_' . $top . '"';

    if (($x % $even_line) == 0 && ($y % 2) != 0) {
        $x = 1;
        $y++;
    } elseif (($y % 2) == 0 && ($x % $odd_line) == 0) {
        $x = 1;
        $y++;
    } else {
        $x++;
    }
    
    $coor = '<small>' . $left . '_' . $top . '</small>';

    $line[] = '<image src="Circle_' . ($color[rand(0, 3)]) . '.png" set="1" class="abs" ' . $attrib . ' />';
    //$line[] = '<div set="1" class="abs" ' . $attrib . ' src="'.$col.'" >' . $coor . '</div>';
}
?>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<style>
    .bor{border:solid red 1px}
    .abs{position: absolute;text-align: center}
</style>

<?php  foreach ($line as $d):?>
    <?php echo $d;?>
<?php endforeach;?>

<p id="console"></p>
<p id="console2"></p>
<script>
    
    var elem = 'img';
    var poped = new Array();
    var temp = new Array();
    var temp_poped = new Array();
    var bottom = <?php echo ($y - 1) * $interval?>;
    var left = <?php echo $interval?>;
    var top = <?php echo $interval?>;
    var right = <?php echo $even_line * $interval;?>;
    var is_hanging = true;
    var chi = 1;
    var speed = 10;
    
    $(document).ready(function(){
        $(".abs").click(function(){
            //$(this).css('background-color','');
            //test(this);
            //alert(4);
            //return true;
            
            var coor = $(this).attr('title');
            var a_coor = get_attr(elem+'[title="'+coor+'"]');
            var x = a_coor.x;
            var y = a_coor.y;
            var color = a_coor.color;
            var res = check_mate(x,y,color);
            if(res.ret > 0){
                animate_delete();
            }
            
        });
        
        
    });    
    
    
    function test(index){
        var obj = get_attr(index);
        $(index).attr('set','0');
        poped.push(obj);
        animate_delete();    
    }
    
    function check_hanging_obj(x,y){
        
        var indexes = mate_coor(x, y);
        var ret = false;
        $.each(indexes,function(i, v){
            var obj = {x:v.x, y:v.y};
            if(is_over_lap(v) || v.y == top || in_array_obj(obj,poped)){
                return true;
            }
            
            temp.push(obj);
            
            collect_hanging_obj(v.x,v.y);
            if(is_hanging){
                $.each(temp,function(i2, v2){
                    $(elem+'[title="'+v2.x+'_'+v2.y+'"]').attr('set','0');
                    poped.push(v2);
                });
                animate_delete();
                ret = true;
            }
            is_hanging = true;
            temp = new Array();
            
        });    
        return ret;
    }
    
    function collect_hanging_obj(x,y){
    
        var indexes = mate_coor(x, y);
        
        $.each(indexes,function(i, v){
            
            $("#console2").html(chi++)
            
            if(is_over_lap(v)){
              return true;
            }
            
            if(!in_array_obj(v, temp) && !in_array_obj(v,poped)){
                
                if(v.y == top){
                    is_hanging = false;
                    return false;
                }
                temp.push(v);
                ret = collect_hanging_obj(v.x, v.y);
            }
        });
    }
    
    function check_mate(x,y,color){
        
        var indexes = mate_coor(x, y);
        
        var obj = '';
        var index = '';
        var ret = 0;
        var ctr = 0;
        
        $.each(indexes, function(i, v){
            index = elem+'[title="'+v.x+'_'+v.y+'"]'; 
            obj = get_attr(index);
            ctr++;
            if(obj && obj.set == '1' && obj.color == color){
                ret++;
                $(index).attr('set','0');
                push(obj);
                var res = check_mate(obj.x,obj.y,obj.color);
                ret += res.ret; ctr += res.ctr;
                
            }
        });
        
        return {ret:ret,ctr:ctr};
    }
    
    
    function animate_delete(){
        
        var index = elem+'[set="0"]'; 
        
        if($(index).attr('title')){
            $(index).each(function(){
                var self = this;
                
                $(this).animate({width:3,opacity:'hide'},speed,function(){
                    $(self).remove();
                });
                return false;
            });    
            
            setTimeout("animate_delete()",80);
        }else if(!equal_obj(poped, temp_poped)){
            
           $.each(poped,function(i,v){
               if(!in_array_obj(v,temp_poped)){
                   temp_poped.push(v);
                   var res = check_hanging_obj(v.x, v.y);
                   if(!res){
                       animate_delete();
                   }
                   return false;
               }
           });
        }
    }
    
    function mate_coor(x, y){
        x = parseInt(x);
        y = parseInt(y);
        return {
            r:{x:(x+left),y:(y+0)},
            l:{x:(x-left),y:(y+0)},
            ur:{x:(x+(left/2)),y:(y-left)},
            ul:{x:(x-(left/2)),y:(y-left)},
            lr:{x:(x+(left/2)),y:(y+left)},
            ll:{x:(x-(left/2)),y:(y+left)}
        };
    }
    
    function get_attr(index){
        var coor = $(index).attr('title');
        if(coor){
            var a_coor = coor.split('_');
            return {
                x:a_coor[0],
                y:a_coor[1],
                color:$(index).attr('src'),
                set:$(index).attr('set')
            }
        }else{
            return false;
        }
    }
    
    function push(attrib){
        
        poped.push(attrib);
    }
    
    function equal_obj(obj1, obj2){
        var ret = true;
        $.each(obj1,function(i, v){
            if(!in_array_obj(v,obj2)){
                ret = false;
                return false;
            }
        });
        return ret;
    }
    
    function is_over_lap(v){
        var ret = false;
        if(v.x < left || v.x > right || v.y > bottom || v.y < top){
            ret = true;
        }
        return ret;
    }
    
    function in_array_obj(obj,array_obj){
        var ret = false;
        $.each(array_obj,function(v,i){
            if(i.x == obj.x && i.y == obj.y){
                ret = true;
                return false;
            }
            
        });
        return ret;
    }
    
    function in_array(niddle, haystack){
        var ret = false;
        $.each(haystack, function(i, v){
            if(niddle == v){
                ret = true;
                return false;
            }
        });
        return ret;
    }
    
    
</script>